<template>
	<view>
		<uNavbar title="银行卡支持列表"></uNavbar>
		
		<view class="card flex_dq">
			<view class="navbar_box " v-for="(item,index) in list" :key="item.id" @click="changeTaggle(item.id)">
				<text class="navbar" :class="item.id ==ids?'active':'' " >{{item.name}}</text>
			</view>
		</view>
		<view class="support">
			<image class="img1" v-show="ids ==2" :src="image" mode="aspectFit"></image>
			<image class="img2" v-show="ids ==1" src="../../static/image/card2.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import {agreementImages}from "../../api/other.js"
	export default {
		data() {
			return {
				ids:2,
				image:"",
				list:[
					
					{id:2,name:'新生支付'},
					// {id:1,name:'杉德支付'},
				]
			}
		},
		onLoad() {
			this.getimage()
		},
		methods: {
			getimage(){
				agreementImages().then(res=>{
					this.image=res.data.xs_wallet_card_images
				})
			},
			changeTaggle(id){
				this.ids = id
			}
		},
	}
</script>
<style>
	page {
		background:#E0DDDA;
	}
</style>
<style scoped>
	.card{
		margin-top: 50rpx;
	}
	.navbar_box{
		margin: 0 48rpx;
	}
	.navbar{
		font-size: 34rpx;
		color: #A6A5AF;
	}
	.active{
		color:#AB8E68 !important; ;
	}
	.support{
		width:750rpx;
	}
	.img1{
		width:750rpx;
		height: 5200rpx;
	}
	.img2{
		width:750rpx;
		height: 3800rpx;
	}
</style>